<template>
  <section>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
    <h-tabbar v-if="routerIndex <=3"></h-tabbar>
  </section>
</template>
<script>
  import hTabbar from '../../components/home/h-tabbar'
  export default {
    name: 'homeBase',
    data(){
      return{
        transitionName:'',
        routerIndex:0
      }
    },
    mounted(){
        if(this.$router.currentRoute.path=='/'){
          this.$router.push("home")
        }
    },
    components:{
      hTabbar,
    },watch: {//使用watch 监听$router的变化
      $route(to, from) {
        this.routerIndex = to.meta.index;
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if(to.meta.index > from.meta.index){
          //设置动画名称
          this.transitionName = 'slide-left';
        }else{
          this.transitionName = 'slide-right';
        }
      }
    }
  }
</script>
<style>
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>
